<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向属性</title>
		<!-- 垂直方向属性 vertical-align 
		     功能：1.应用于表格【栅格布局】
			 2.行内元素与行内块元素对齐方式’
			 理解：文本和图片的对齐方式【垂直居中】
			 元素种类：
			 行内元素：典型行内元素 span、a、文本
			 特点：在一行内显示、不可设置宽高
			 块级元素：典型块级元素 div、p
			 特点：独占一行、可设宽高
			 行内块元素:典型行内块元素 img 
			 特点：在一行内显示、可设置宽高
			 页面组成：元素之间嵌套生成
			 三种元素相互嵌套    √   嵌套根据元素特点页面混乱
			 嵌套条件1：在一行内显示【效果】
			           块套行  √   推荐
					   行套行  √
					   行套块  √   增加条件，块添加宽高,造成页面布局混乱
					   块套块  √
			嵌套条件2：独占一行【效果】
					   块套行  √   推荐
					   行套行  X
					   行套块  X   混乱
					   块套块  √
		-->
		<style>
			/* 抓每个img 派生（后代）选择器
			特点：抓取父元素中所有（后代）子元素[元素嵌套特点]
			伪类选择器：
			特点：在选择器后，过滤符合“特定条件”某个元素
			nth-child:选中父元素中第N个
			符合条件：p中包含4个img
			id抓取父元素：空间大
			class抓取父元素中某个子元素：微调
			*/
			i mg:nth-child(1){
				border: 10px solid red;
			}
			im g :nth-child(2){
				border: 20px solid #ff0;
			}
			/* 标准抓取每个img方案 */
			p img.baseline{
				vertical-align: baseline;
			}
			p img.top{
				vertical-align: top;
			}
			p img.middle{
				vertical-align: middle;
				/* vertical-align操作文本和图片垂直
				text-align操作文本左右和居中以及两边对齐
				 */
			}
			p img.bottom{
				vertical-align: bottom;
			}
		</style>
	</head>
	<body>
		
		<h1>垂直方向属性使用【针对元素种类】</h1>
		<p>蜡笔小新<img  class="baseline" src="img/img_1.png" alt="蜡笔小心"width="100px" height=100px >基线对齐</p>
		<p>蜡笔小新<img  class="top" src="img/img_2.png" alt="蜡笔小心" width="100px" height=100px>顶部对齐</p>
		<p>蜡笔小新<img  class="middle" src="img/img_3.png" alt="蜡笔小心" width="100px" height=100px>中间对齐</p>
		<p>蜡笔小新<img  class="bottom" src="img/img_4.png" alt="蜡笔小心" width="100px" height=100px>底部对齐</p>
		<!-- 需求：垂直方向属性 4个属性值
		           如果，不改变现有html结构，可以找到依次4个img
				   抓每个---4个图片
			思路：派生选择器+伪类选择器
		 -->
	</body>
</html>